import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/tabs/spotPage(draft).dart';
import 'dart:async';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'home_catalogue.dart';
import 'dart:ui';
import 'spotData.dart';
import 'spotPage.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List _bannerImages = [
    Image.asset('images/homePageImages/banner1.jpg'),
    Image.asset('images/homePageImages/banner2.jpg'),
    Image.asset('images/homePageImages/banner3.jpg'),
    Image.asset('images/homePageImages/banner4.jpg')
  ];
  final _scrollController = ScrollController();
  // 生成数组
  final numbers = List.generate(5, (i) => i);
  bool isLoading = false;
  List pageList = new List();

  @override
  void initState() {
    super.initState();
    // 监听现在的位置是否下滑到了底部
    _scrollController.addListener(() {
      if (_scrollController.offset ==
          _scrollController.position.maxScrollExtent) {
        // 加载更多数据
        loadMore(numbers.length);
      }
    });
  }

  loadMore(int from) async {
    if (!isLoading) {
      setState(() {
        isLoading = true;
      });
    }
    // 延迟处理任务
    await Future.delayed(Duration(seconds: 1), () {
      setState(() {
        isLoading = false;
        numbers.addAll(List.generate(5, (i) => i + from));
        for (var i = 0; i <= 4; i++) {
          pageList.add(Container(
            height: MediaQuery.of(context).size.width,
            child: Row(
              children: <Widget>[
                Expanded(
                  child: Container(),
                  flex: 1,
                ),
                Expanded(
                  child: Column(
                    children: <Widget>[
                      Expanded(
                          child: FlatButton(
                                  onPressed: () {
                                    Navigator.push<int>(context,
                                      new MaterialPageRoute(builder: (BuildContext context){
                                        return new spotPageBuild(index:((from-3)*2%spotData.length));
                                      })
                                    );
                                    
                                  },
                                  padding: EdgeInsets.all(0),
                                  child: Container(
                                    width: MediaQuery.of(context).size.width/43.0 *40,
                                    height: MediaQuery.of(context).size.width /7.0 *4,
                                    child: Image.asset(
                                      spotData[((from-3)*2%spotData.length)]["imageAsset"],
                                      fit: BoxFit.cover,
                                    ),
                                  )),
                          flex: 4),
                      Expanded(
                        flex: 3,
                        child: Container(
                              child: Column(
                                children: <Widget>[
                                  Container(
                                    child: Text(
                                      spotData[((from-3)*2)%spotData.length]['title'],
                                      style: TextStyle(
                                        fontSize: 20,
                                      ),
                                    ),
                                  ),
                                  Container(
                                    child:Text(
                                      spotData[((from-3)*2)%spotData.length]['shortDescription'],
                                      style: TextStyle(
                                        fontSize: 16,
                                        color: Colors.blue
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            ),
                      )
                    ],
                  ),
                  flex: 20,
                ),
                Expanded(
                  child: Container(),
                  flex: 1,
                ),
                Expanded(
                  child: Column(
                    children: <Widget>[
                      Expanded(
                          child: FlatButton(
                                  onPressed: () {
                                    Navigator.push<int>(context,
                                      new MaterialPageRoute(builder: (BuildContext context){
                                        return new spotPageBuild(index:(((from-3)*2+1)%spotData.length));
                                      })
                                    );
                                    
                                  },
                                  padding: EdgeInsets.all(0),
                                  child: Container(
                                    width: MediaQuery.of(context).size.width/43.0 *40,
                                    height: MediaQuery.of(context).size.width /7.0 *4,
                                    child: Image.asset(
                                      spotData[((from-3)*2+1)%spotData.length]["imageAsset"],
                                      fit: BoxFit.cover,
                                    ),
                                  )),
                          flex: 4),
                      Expanded(
                        flex: 3,
                        child: Container(
                              child: Column(
                                children: <Widget>[
                                  Container(
                                    child: Text(
                                      spotData[((from-3)*2+1)%spotData.length]['title'],
                                      style: TextStyle(
                                        fontSize: 20,
                                      ),
                                    ),
                                  ),
                                  Container(
                                    child:Text(
                                      spotData[((from-3)*2+1)%spotData.length]['shortDescription'],
                                      style: TextStyle(
                                        fontSize: 16,
                                        color: Colors.blue
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            ),
                      )
                    ],
                  ),
                  flex: 20,
                ),
                Expanded(
                  child: Container(),
                  flex: 1,
                ),
              ],
            ),
          ));
        }
        ;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.white,
        leading: IconButton(
            onPressed: () {},
            icon: Row(
              children: <Widget>[
                Expanded(
                  child: Text(
                    '位置',
                    style: TextStyle(
                        fontSize: 13, color: Color.fromRGBO(135, 201, 181, 1)),
                  ),
                  flex: 2,
                ),
                Expanded(
                  child: Icon(Icons.keyboard_arrow_down,
                      color: Color.fromRGBO(135, 201, 181, 1)),
                  flex: 1,
                ),
              ],
            )),
        title: Row(
          children: <Widget>[
            Expanded(
              child: FlatButton(
                onPressed: () {},
                child: Container(
                  child: Row(
                    children: <Widget>[
                      Icon(Icons.search),
                      Text(
                        '点击此处搜索',
                        style: TextStyle(fontSize: 12),
                      )
                    ],
                  ),
                ),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(20))),
                color: Color.fromRGBO(135, 201, 181, 0.3),
              ),
            ),
          ],
        ),
        actions: <Widget>[
          IconButton(
            onPressed: () {},
            //padding: EdgeInsets.all(1.0),
            icon: Icon(Icons.mic, color: Color.fromRGBO(135, 201, 181, 1)),
            splashColor: null,
          ),
          FlatButton(
              onPressed: () {
                Navigator.of(context).pushNamed('/login');
              },
              child: Text(
                '点击登录',
                style: TextStyle(
                  fontSize: 8,
                ),
              ),
              shape: CircleBorder(
                  side: BorderSide(color: Color.fromRGBO(135, 201, 181, 0.7))),
              color: Color.fromRGBO(135, 201, 181, 0.7))
        ],
        actionsIconTheme: IconThemeData(size: 10),
      ),
      body: ListView.builder(
          controller: _scrollController,
          addRepaintBoundaries: false,
          itemBuilder: (BuildContext context, int index) {
            // 如果下滑到底部，显示加载动画，否则正常显示 ListTile
            if (index == numbers.length) {
              return Center(
                child: Opacity(
                  opacity: isLoading ? 1.0 : 0.0,
                  child: CircularProgressIndicator(),
                ),
              );
            } else if (index == 0) {
              return Container(
                height: MediaQuery.of(context).size.width * 0.6,
                child: catalogue(),
              );
            } else if (index == 1) {
              return Container(
                  height: MediaQuery.of(context).size.width * 0.44,
                  child: Swiper(
                    itemCount: 4,
                    autoplay: true,
                    pagination: SwiperPagination(
                      alignment: Alignment.bottomCenter,
                      builder: SwiperPagination.dots,
                      margin: EdgeInsets.all(0)
                      ),
                    itemBuilder: (BuildContext context, int index) {
                      return _bannerImages[index];
                    },
                  ));
            } else if (index == 2) {
              return Container(height: 10);
            } else if (index == 3 || index == 4) {
              return Container(
                height: MediaQuery.of(context).size.width,
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: Container(),
                      flex: 1,
                    ),
                    Expanded(
                      child: Column(
                        children: <Widget>[
                          Expanded(
                              child: FlatButton(
                                  onPressed: () {
                                    Navigator.push<int>(context,
                                      new MaterialPageRoute(builder: (BuildContext context){
                                        return new spotPageBuild(index:(index-3)*2);
                                      })
                                    );
                                    
                                  },
                                  padding: EdgeInsets.all(0),
                                  child: Container(
                                    width: MediaQuery.of(context).size.width/43.0 *40,
                                    height: MediaQuery.of(context).size.width /7.0 *4,
                                    child: Image.asset(
                                      'images/homePageImages/spotImages/sihai.jpg',
                                      fit: BoxFit.cover,
                                    ),
                                  )),
                              flex: 4),
                          Expanded(
                            flex: 3,
                            child: Container(
                              child: Column(
                                children: <Widget>[
                                  Container(
                                    child: Text(
                                      spotData[(index-3)*2]['title'],
                                      style: TextStyle(
                                        fontSize: 20,
                                      ),
                                    ),
                                  ),
                                  Container(
                                    child:Text(
                                      spotData[(index-3)*2]['shortDescription'],
                                      style: TextStyle(
                                        fontSize: 16,
                                        color: Colors.blue
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            ),
                          )
                        ],
                      ),
                      flex: 20,
                    ),
                    Expanded(
                      child: Container(),
                      flex: 1,
                    ),
                    Expanded(
                      child: Column(
                        children: <Widget>[
                          Expanded(
                              child: FlatButton(
                                  onPressed: () {
                                    Navigator.push<int>(context,
                                      new MaterialPageRoute(builder: (BuildContext context){
                                        return new spotPageBuild(index:((index-3)*2+1));
                                      })
                                    );
                                    
                                  },
                                  padding: EdgeInsets.all(0),
                                  child: Container(
                                    width: MediaQuery.of(context).size.width/43.0 *40,
                                    height: MediaQuery.of(context).size.width /7.0 *4,
                                    child: Image.asset(
                                      'images/homePageImages/spotImages/qingdao.jpg',
                                      fit: BoxFit.cover,
                                    ),
                                  )),
                              flex: 4),
                          Expanded(
                            flex: 3,
                            child: Container(
                              child: Column(
                                children: <Widget>[
                                  Container(
                                    child: Text(
                                      spotData[(index-3)*2+1]['title'],
                                      style: TextStyle(
                                        fontSize: 20,
                                      ),
                                    ),
                                  ),
                                  Container(
                                    child:Text(
                                      spotData[(index-3)*2+1]['shortDescription'],
                                      style: TextStyle(
                                        fontSize: 16,
                                        color: Colors.blue
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            ),
                          )
                        ],
                      ),
                      flex: 20,
                    ),
                    Expanded(
                      child: Container(),
                      flex: 1,
                    ),
                  ],
                ),
              )

                  /*ListTile(
                title: Text('item ${numbers[index]}'),
                leading: CircleAvatar(
                  child: Text('$index'),
                  backgroundColor: Colors.pink,
                ),
              )*/
                  ;
            } else {
              return pageList[index - 5];
            }
          },
          //separatorBuilder: (BuildContext context, int index) => Divider(),
          // 记得在这里加1
          itemCount: numbers.length + 1),
    );
  }
}
